<template>
  <div class="main">
    <div class="main_login">
      <div class="main_login_box">
        <p class="main_login_box_title">五次方后台管理系统</p>
        <input v-model="sysUser.mobile" type="text" placeholder="手机号">
        <input v-model="sysUser.password" type="password" placeholder="密码">
        <div @click="sysUserLogin" class="main_login_box_button">登录</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {SysUser} from "@/model/login";
import {login} from "@/api/login";
import router from "@/router";
import {useStore} from '@/store'
import {message} from "ant-design-vue";

//登录所需的参数
const sysUser = ref<SysUser>({
  mobile: '',
  password: ''
})

//登录
const sysUserLogin = () => {
  //手机号正则校验
  const reg = /^1[3-9]\d{9}$/
  if (sysUser.value.mobile == '') {
    message.warn("手机号不能为空！")
  } else if (sysUser.value.password == '') {
    message.warn("密码不能为空！")
  } else if (!reg.test(sysUser.value.mobile)) {
    message.error("手机号格式不对")
  } else {
    login(sysUser.value).then((res) => {
      if (res.data?.code == 200) {
        const store = useStore()
        store.setToken(res.data.data.token)
        router.push("/")
      } else {
        message.error(res.data.message)
      }
    })
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-image: url('@/assets/img/login.jpg');
  background-size: cover;

  .main_login {
    width: 550px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right bottom,
    rgba(255, 255, 255, .7),
    rgba(255, 255, 255, .5),
    rgba(255, 255, 255, .4));
    /* 使背景模糊化 */
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px #a29bfe;
    border-radius: 15px;

    .main_login_box {
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .main_login_box_title {
        font: 900 40px '';
        text-align: center;
        letter-spacing: 5px;
        color: #3d3d3d;
      }

      .main_login_box_button {
        text-align: center;
        display: block;
        padding: 12px;
        font: 900 20px '';
        border-radius: 10px;
        margin-top: 20px;
        color: #fff;
        letter-spacing: 3px;
        background-image: linear-gradient(to left, #fd79a8, #a29bf6);
        cursor: pointer;
      }
    }
  }
}

.main_login_box input {
  width: 400px;
  height: 100%;
  margin-bottom: 20px;
  outline: none;
  border: 0;
  padding: 10px;
  background-color: transparent;
  border-bottom: 3px solid rgb(150, 150, 240);
  font: 900 16px '';
}


</style>